<script setup>
import fetch from '../utils/fetch.js'
import { Window } from '@tauri-apps/api/window';
import { ref, reactive, computed, watch, useTemplateRef } from "vue";
import IconSvg from "../components/IconSvg.vue";
import { debounce } from "../utils/index.js";
import { getSongList, getSongDetails, getHtmlSong, refreshSongUrl } from "../utils/api.js";
import SongList from "../components/SongList.vue";
import Songs from "../components/Songs.vue";
import { getSongsData, setSong, like, settingStore } from "../utils/store.js";
import audio from "../utils/audio.js";

const appWindow = new Window('main');
const currentLyric = useTemplateRef('currentLyric')
const lyricScroll = useTemplateRef('lyricScroll')
const data = reactive({
  defaultsDj: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
  windowSizeState: false,
  darkTheme: false,
  songBill: null,
  songsData: [],
  playList: [],
  currentSong: null,
  playState: false,
  searchKey: '',
  searchList: [],
  searchListShow: false,
  load: false,
  songModel: {
    select: 0,
    list: [
      'random',
      'repeat',
      'loop_once'
    ]
  },
  randomSongs: [],
  lyrics: false,
  volume: 1
})

const themeMedia = window.matchMedia("(prefers-color-scheme: light)");
if (themeMedia.matches) {
  data.darkTheme = false;
  document.documentElement.classList.remove("dark-theme");
} else {
  data.darkTheme = true;
  document.documentElement.classList.add("dark-theme");
}
getSongsData().then(res=>(data.songsData = res))
settingStore().then(res=>{
  if(!res)return
  data.darkTheme = res.darkTheme
  if (data.darkTheme) {
    document.documentElement.classList.add("dark-theme");
  } else {
    document.documentElement.classList.remove("dark-theme");
  }
})

appWindow.onResized(debounce(()=>{
  appWindow.isMaximized().then(max =>{
    data.windowSizeState = max
  })
}, 200))

audio.addEventListener('ended', ()=>{
  switch (data.songModel.list[data.songModel.select]) {
    case 'random':
      data.randomSongs.push(data.currentSong)
      let randomList = data.playList.filter(item=>{
        return !data.randomSongs.some(i => item.id === i.id)
      })
      if(!randomList.length)return
      data.currentSong = randomList[Math.floor(Math.random() * randomList.length)]
      playSong(data.currentSong)
      break;
    case 'repeat':
      nextSong()
      break;
    case 'loop_once':
      break;
  }

})

const prevSong = () => {
  let index = data.playList.findIndex(item=>item.id === data.currentSong.id)
  index = index === 0 ? data.playList.length - 1 : --index
  data.currentSong = data.playList[index]
  playSong(data.currentSong)
}

const nextSong = () => {
  let index = data.playList.findIndex(item=>item.id === data.currentSong.id)
  index = index === data.playList.length - 1 ? 0 : ++index
  playSong(data.playList[index])
}

const toggleDarkMode = () => {
  if (data.darkTheme) {
    document.documentElement.classList.remove("dark-theme");
    data.darkTheme = false;
  } else {
    document.documentElement.classList.add("dark-theme");
    data.darkTheme = true;
  }
  settingStore({ darkTheme: data.darkTheme })
}

const playSongBill = async (list) => {
  let filterList = data.playList.filter(item=>{
    return !list.some(i => item.id === i.id)
  })
  if (filterList.length === 0 && list.length === 1 && data.playList > 0) {
    let index = filterList.findIndex(item=>{
      return item.id === list[0].id
    })
    playSong(data.playList[index])

  }else{
    data.playList = [...list, ...filterList]
    playSong(data.playList[0])
  }
}

const songList = computed(()=>{
  let list = data.songsData.find(item=>{
    return item._id === data.songBill
  })
  return list.songs
})

const progress = computed(()=>{
  return audio.progress.value + '%'
})

const isPlaying = computed(()=>{
  return audio.isPlaying.value
})

const isLike = computed(() => {
  if(!data?.currentSong?.id)return false
  return data.songsData.find(item=>item._id === 'like')?.songs.some(item=>{
    return item.id === data.currentSong.id
  })
})

const timerConvert = (time) => {
  let minute = parseInt(time.split(':')[0])
  let second = parseFloat(time.split(':')[1])
  return (minute * 60 + second).toFixed(3)
}

const lyricsList = computed(()=>{
  if(!data.currentSong?.lyrics)return [];
  let lyricsData = data.currentSong.lyrics.split('\n').map(item=>{
    let time, lyrics
    let params = item.split(']')
    if(params.length > 1){
      time = params[0]
      lyrics = params[1]
    }else{
      time = ''
      lyrics = params[0]
    }
    time = time && time.slice(1)
    return {
      time,
      lyrics
    }
  }).filter(item=>{
    return item.lyrics
  })
  return lyricsData
})

const currentTime = computed(()=>{
  return audio.time(audio.currentTime.value)
})

const duration = computed(()=>{
  return audio.time(audio.duration.value || 564)
})

const getDistanceToScrollTop = (element, scrollContainer) => {
  const elementRect = element.getBoundingClientRect();
  const containerRect = scrollContainer.getBoundingClientRect();

  // 计算元素顶部相对于容器顶部的距离
  return elementRect.top - containerRect.top + scrollContainer.scrollTop;
}


watch(currentLyric, (newValue, oldValue)=>{
  if(newValue){
    let scrollHeight = lyricScroll.value.clientHeight
    let distance = getDistanceToScrollTop(newValue[0], lyricScroll.value)
    if(distance > (scrollHeight / 2) || lyricScroll.value.scrollTop > distance ){
      lyricScroll.value.scrollTo({
        top: distance - scrollHeight / 2,
        behavior: 'smooth'
      })
    }
  }
})

const networkUrl = async (song) => {

  if(song.url){
    let details = await getHtmlSong(song.url)
    let newSong = {...song, ...details}
    delete newSong.url
    if(!newSong?.audio_url){
      alert('获取歌曲失败')
    }
    return newSong
  }

  if(song.audio_url){
    let res = await fetch(song.audio_url)
    if (res.status < 200 || res.status >= 300) {
      let audio_url = await refreshSongUrl(song.id)
      let newSong = { ...song, audio_url}
      delete newSong.url
      data.playList = data.playList.map(item=>{
        if (item.id === song.id) {
          return newSong
        }
        return item
      })
      await setSong({ song: newSong})
      data.songsData = await getSongsData()
      return newSong
    }

    return song
  }


  let details = await getSongDetails(song.id)
  let newSong = { ...song, ...details}
  delete newSong.url
  return newSong
}

const playSong = async (song) => {
  try {
    data.currentSong = await networkUrl(song)
    audio.startPlay(data.currentSong)
  } catch (e) {
    console.log(e)
  }
}

const clearSearchList = (e) => {
  if(!e.target.value.trim()){
    data.searchList = []
  }

}

const searchSong = async () => {
  data.load = true
  data.searchList = await getSongList(data.searchKey)
  data.load = false
}

const seek = (e) => {
  const clickX = e.offsetX;
  const totalWidth = e.currentTarget.offsetWidth;
  audio.seek(clickX / totalWidth);
}

const likeHandle = async () => {
  data.songsData = await like(data.currentSong)
}

const switchMode = () => {
  data.songModel.select = (data.songModel.select + 1) % data.songModel.list.length
  if(data.songModel.select === 2){
    audio.loop(true)
  }else{
    audio.loop(false)
  }
}

const changeVolume = () => {
  audio.volume(data.volume)
}

const removeSong = (index) => {
  data.playList[index].id === data.currentSong.id && nextSong()
  data.playList.splice(index, 1)
}

const searchListClick = async (song) => {
  data.searchList = [];
  let currentSong = await networkUrl(song)
  playSongBill([currentSong])
}

const lyricsActive = (lyric, index) => {
  if(!lyric.time)return false
  if(index + 1 === lyricsList.value.length && audio.currentTime.value >= timerConvert(lyric.time))return true
  if(index + 1 === lyricsList.value.length)return false
  return audio.currentTime.value  <  timerConvert(lyricsList.value[index + 1].time) && audio.currentTime.value >= timerConvert(lyric.time)
}
</script>

<template>
  <div class="music-player">
    <div data-tauri-drag-region class="player-header">
      <div data-tauri-drag-region class="player-header-border">
        <div class="logo">
          <icon-svg class="icon-music" name="music"></icon-svg>
          <h1>HX</h1>
        </div>
        <div class="header-controls">
          <button class="theme-toggle" id="themeToggle" @click="toggleDarkMode">
            <icon-svg :name="data.darkTheme ? 'moon' : 'sun'"></icon-svg>
          </button>
          <div class="search-container">
            <div class="search-box">
              <icon-svg name="search" class="icon-search"></icon-svg>
              <input type="text" placeholder="搜索歌曲、歌手或专辑..." v-model="data.searchKey" @change="clearSearchList" @keyup.enter="searchSong()" >
              <icon-svg v-show="data.load" name="load" class="icon-load"></icon-svg>
            </div>
            <div :class="['search-results', { 'active': data.searchList.length }]" id="searchResults">
              <!-- 搜索结果将由JS动态生成 -->
              <div class="search-result-item" v-for="item in data.searchList" :key="item.id" @click="searchListClick(item)">
                <img :src="item.cover" alt="">
                <div class="search-result-info">
                  <div class="search-result-title">{{ item.name }}</div>
                  <div class="search-result-artist">{{ item.artist.join('、') }}</div>
                </div>
              </div>
<!--              <div class="search-result-item" v-if="data.searchKey && !data.searchList.length">没有找到匹配的歌曲</div>-->
            </div>
          </div>
          <div class="window-controls">
            <div class="control-btn minimize-btn" @click="appWindow.minimize()">
              <icon-svg name="minus"></icon-svg>
            </div>
            <div class="control-btn maximize-btn" @click="appWindow.toggleMaximize()">
              <icon-svg :name="data.windowSizeState ? 'window-restore' : 'square'"></icon-svg>
            </div>
            <div class="control-btn close-btn" @click="appWindow.hide()">
              <icon-svg name="xmark"></icon-svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="player-body">
      <div class="album-section">
        <div :class="['album-art', { 'play': isPlaying } ]">
          <img :src="data.currentSong ? data.currentSong.cover : data.defaultsDj" alt="Album Art">
        </div>
        <div class="song-info">
          <h2>{{ data.currentSong ? data.currentSong.name : '请选择歌曲' }}</h2>
          <p>{{ data.currentSong ? data.currentSong.artist : '请选择歌曲' }}</p>
        </div>
      </div>

      <div class="controls-section">
        <div class="playlist" v-show="!data.lyrics">
          <h3>播放列表</h3>
          <div :class="['playlist-item', { 'active': item?.id === data.currentSong?.id }]" v-for="(item, index) in data.playList" :key="item.id" @click="playSong(item)">
            <div class="song-details">
              <img :src="item.cover" alt="Song">
              <div class="song-info">
                <div class="song-title">{{ item.name }}</div>
                <div class="song-name">{{ item.artist }}</div>
              </div>
              <button class="remove-song" @click.stop="removeSong(index)">
                <icon-svg name="xmark"></icon-svg>
              </button>
            </div>
<!--            <div class="song-duration">3:45</div>-->
          </div>
        </div>
        <div v-show="data.lyrics" class="lyrics" ref="lyricScroll">
          <p v-for="(item, index) in lyricsList" :ref="lyricsActive(item, index) ? 'currentLyric' : '' " :class="['lyrics-word', { 'active': lyricsActive(item, index) }]">{{ item.lyrics }}</p>
        </div>

        <div class="progress-controls">
          <div class="progress-time">
            <span>{{ currentTime || '0:00' }}</span>
            <span>{{ duration || '9:24' }}</span>
          </div>
          <div class="progress-bar" @click="seek">
            <div class="progress" :style="{ 'width': progress }"></div>
          </div>

          <div class="control-buttons">
            <button class="player-control-btn">
              <icon-svg :name="data.songModel.list[data.songModel.select]" @click="switchMode"></icon-svg>
            </button>
            <button class="player-control-btn" @click="prevSong">
              <icon-svg name="step-backward"></icon-svg>
            </button>
            <button class="player-control-btn play-pause" @click="audio.playing()">
              <icon-svg v-show="isPlaying" name="pause"></icon-svg>
              <icon-svg v-show="!isPlaying" name="play"></icon-svg>
            </button>
            <button class="player-control-btn" @click="nextSong">
              <icon-svg name="step-forward"></icon-svg>
            </button>
            <button :class="['player-control-btn', {'active': data.lyrics}]" @click="data.lyrics = !data.lyrics">
              <icon-svg name="word"></icon-svg>
            </button>
          </div>
        </div>
      </div>

      <div class="playlists-song-list">
        <div class="playlists-header">
          <h3>我的歌单</h3>
<!--          <button v-show="!data.songBill" class="add-playlist-btn" id="addPlaylistBtn">-->
<!--            <icon-svg name="plus"></icon-svg>-->
<!--          </button>-->
          <button v-show="data.songBill" class="add-playlist-btn" id="addPlaylistBtn" @click="data.songBill = null">
            <icon-svg name="return"></icon-svg>
          </button>
        </div>
        <div class="playlists-container">
          <Songs v-if="data.songBill" :list="songList" :playSongBill="playSongBill"></Songs>
          <song-list v-else :songsData="data.songsData" v-model="data.songBill" :playSongBill="playSongBill"></song-list>
        </div>
      </div>
    </div>
    <div class="player-footer">
      <div class="player-footer-border">
        <div class="player-footer-controls">
          <div class="player-mode">
<!--            <icon-svg name="repeat"></icon-svg>-->
            <icon-svg :class="['icon-btn', { 'active': isLike }]" @click="likeHandle" name="heart"></icon-svg>
<!--            <icon-svg class="icon-btn" name="list"></icon-svg>-->
          </div>
          <div class="volume-control">
            <icon-svg name="volume-high"></icon-svg>
            <input type="range" class="volume-slider" min="0" max="1" step="0.1" @input="changeVolume" v-model="data.volume">
          </div>
        </div>
        <div class="player-status">
          {{ data.currentSong ? `正在播放：${data.currentSong.name} - ${data.currentSong.artist}` : '' }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.music-player{
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .player-header {
    padding: 20px 20px 0 20px;
    -webkit-user-select: none;
    user-select: none;

    .player-header-border {
      width: 100%;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding-bottom: 15px;
    }


    .logo {
      display: flex;
      align-items: center;
      gap: 5px;

      .icon-music{
        font-size: 38px;
        color: var(--accent-color);
      }

      h1 {
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        background: var(--accent-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .header-controls {
    display: flex;
    align-items: center;
    gap: 15px;

    .theme-toggle {
      background: var(--control-bg);
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      color: var(--text-color);

      &:hover {
        background: var(--accent-color);
        color: white;
      }
    }
    .search-container {
      position: relative;

      .search-results {
        position: absolute;
        top: 120%;
        left: 0;
        right: 0;
        background: var(--player-bg);
        border-radius: 0 0 12px 12px;
        margin-top: -5px;
        padding-top: 10px;
        max-height: 300px;
        overflow-y: auto;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        z-index: 100;
        display: none;

        &::-webkit-scrollbar {
          width: 5px;
        }

        &::-webkit-scrollbar-thumb {
          background: var(--scrollbar-thumb);
          border-radius: 10px;
        }
      }

      .search-results.active {
        display: block;
        animation: slideDown 0.3s ease;
      }

      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .search-result-item {
        padding: 12px 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: background 0.2s;
      }

      .search-result-item:hover {
        background: var(--control-bg);
      }

      .search-result-item img {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        object-fit: cover;
      }

      .search-result-info {
        flex: 1;
        min-width: 0;
      }

      .search-result-title {
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .search-result-artist {
        font-size: 12px;
        color: var(--secondary-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .search-result-duration {
        color: var(--secondary-text);
        font-size: 12px;
      }

      .highlight {
        background: rgba(78, 204, 163, 0.3);
        padding: 0 2px;
        border-radius: 2px;
      }
    }
    .search-box {
      background: var(--control-bg);
      border-radius: 50px;
      padding: 8px 15px 8px 37px;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 250px;
      position: relative;
      z-index: 101;

      input {
        background: transparent;
        border: none;
        color: var(--text-color);
        width: 100%;
        outline: none;
        font-size: 13px;
      }

      svg {
        position: absolute;
        color: var(--accent-color);
        font-size: 19px;
        top: 0;
        bottom: 0;
        margin: auto;
      }

      .icon-search {
        left: 10px;
      }
      .icon-load {
        right: 25px;
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

    }


    .window-controls {
      display: flex;
      align-items: center;
      gap: 5px;

      .control-btn {
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        color: var(--secondary-text);
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s;

        &.control-btn:hover {
          background: var(--control-bg);
          color: var(--text-color);
        }

        &.close-btn:hover {
          background: #ff5f57;
          color: white;
        }

        &.maximize-btn:hover {
          background: #28c940;
          color: white;
        }
      }
    }
  }

  .player-body{
    flex: 1;
    gap: 25px;
    display: flex;
    padding: 0 20px;

    .album-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;

      .album-art {
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: var(--accent-gradient);
        box-shadow: 0 10px 25px rgba(78, 204, 163, 0.3);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: rotate 20s linear infinite;
        animation-play-state: paused;

        &.play {
          animation-play-state: running;
        }

        img {
          width: 90%;
          height: 90%;
          border-radius: 50%;
          object-fit: cover;
        }
      }

      .song-info {
        text-align: center;
        h2 {
          font-size: 28px;
          margin-bottom: 8px;
          font-weight: 700;
        }

        p {
          color: var(--secondary-text);
          font-size: 18px;
        }
      }

    }

    .controls-section{
      flex: 2;
      display: flex;
      flex-direction: column;
      gap: 25px;

      .playlist {
        background: var(--playlist-bg);
        border-radius: 15px;
        padding: 15px;
        flex-grow: 1;
        height: 120px;
        min-height: 120px;
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 5px;
        }

        &::-webkit-scrollbar-thumb {
          background: var(--scrollbar-thumb);
          border-radius: 10px;
        }

        h3 {
          margin-bottom: 15px;
          color: var(--accent-color);
          font-weight: 600;
        }

        .playlist-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px;
          border-radius: 8px;
          margin-bottom: 8px;
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background: var(--control-bg);
          }

          &.active {
            background: rgba(78, 204, 163, 0.2);
          }

          position: relative;

          .remove-song{
            display: none;
            position: absolute;
            border: none;
            outline: none;
            background: transparent;
            right: 5px;
            top: 0;
            bottom: 0;
            margin: auto;
            color: var(--secondary-text);
          }

          &:hover .remove-song{
            display: block;
            cursor: pointer;
            color: var(--text-color);
          }

          .song-details {
            display: flex;
            align-items: center;
            gap: 12px;
          }

          .song-details img {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            object-fit: cover;
          }
          .song-info{
            display: flex;
            flex-direction: column;
            gap: 5px;
            .song-title {
              font-weight: 500;

            }
            .song-name {
              font-size: 12px;
            }
          }
          .song-duration {
            color: var(--secondary-text);
          }

        }

      }

      .lyrics{
        background: var(--playlist-bg);
        border-radius: 15px;
        padding: 15px;
        flex-grow: 1;
        height: 120px;
        min-height: 120px;
        overflow-y: auto;
        white-space: pre-line;
        text-align: center;
        font-size: 14px;
        line-height: 2;

        &::-webkit-scrollbar {
          width: 5px;
        }

        &::-webkit-scrollbar-thumb {
          background: var(--scrollbar-thumb);
          border-radius: 10px;
        }

        .lyrics-word.active{
          color: var(--text-color);
          font-weight: 600;
          text-shadow: 0 0 5px var(--accent-color);

        }

      }

      .progress-controls {
        display: flex;
        flex-direction: column;
        gap: 15px;

        .progress-time {
          display: flex;
          justify-content: space-between;
          color: var(--secondary-text);
          font-size: 14px;
        }

        .progress-bar {
          width: 100%;
          height: 6px;
          background: var(--progress-bg);
          border-radius: 10px;
          cursor: pointer;
          position: relative;

          .progress {
            position: absolute;
            height: 100%;
            width: 0%;
            background: var(--accent-gradient);
            border-radius: 10px;
            transition: width 0.3s linear;
          }
        }

        .control-buttons {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 25px;
          margin-top: 10px;

          .player-control-btn {
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 18px;
            cursor: pointer;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;

            &:hover {
              background: var(--control-bg);
            }

            &.active {
              color: var(--accent-color);
            }
          }

          .play-pause {
            width: 60px;
            height: 60px;
            background: var(--accent-gradient);
            box-shadow: 0 5px 15px rgba(78, 204, 163, 0.4);
            color: white;

            &:hover {
              transform: scale(1.05);
            }
          }


        }


      }
    }

    .playlists-song-list{
      flex: 1;
      min-width: 200px;
      display: flex;
      flex-direction: column;
      gap: 15px;

      .playlists-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        h3 {
          color: var(--accent-color);
          font-weight: 600;
        }

        .add-playlist-btn {
          background: var(--accent-color);
          color: white;
          border: none;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s;

          font-size: 12px;

          &:hover {
            transform: scale(1.1);
            box-shadow: 0 0 10px rgba(78, 204, 163, 0.5);
          }
        }
      }

      .playlists-container {
        background: var(--playlist-bg);
        border-radius: 15px;
        padding: 15px;
        overflow-y: auto;
        flex-grow: 1;
        height: 0;

        &::-webkit-scrollbar {
          width: 5px;
        }

        &::-webkit-scrollbar-thumb {
          background: var(--scrollbar-thumb);
          border-radius: 10px;
        }
      }
    }
  }

  .player-footer{
    padding: 0 20px 20px 20px;

    .player-footer-border{
      border-top: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 15px;
      color: var(--secondary-text);
      font-size: 14px;


      .player-mode {
        display: flex;
        align-items: center;
        gap: 15px;

        svg{
          cursor: pointer;
          transition: color 0.3s;

          &.active{
            color: var(--accent-color);
          }

          &:hover{
            color: var(--accent-color);
          }
        }

        .icon-btn {
          font-size: 18px;
        }


      }

      .player-footer-controls {
        display: flex;
        align-items: center;
        gap: 20px;

        .volume-control {
          display: flex;
          align-items: center;
          gap: 10px;

          svg{
            color: var(--accent-color);
          }

          .volume-slider {
            width: 100px;
            height: 5px;
            -webkit-appearance: none;
            background: var(--progress-bg);
            border-radius: 10px;
            outline: none;

            &::-webkit-slider-thumb {
              -webkit-appearance: none;
              width: 14px;
              height: 14px;
              border-radius: 50%;
              background: var(--accent-color);
              cursor: pointer;
            }
          }
        }
      }

    }
  }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

</style>